<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    // 嵌套组件也被称为组合组件:组件中可以包含另外一个组件.
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    // const App = function(){
    //     return (
    //         <div>
    //             <h3>App组件</h3>
    //         </div>
    //     )
    // }
    // const Child = function(){
    //     return (
    //         <div>
    //             <h3>Child</h3>
    //         </div>
    //     )
    // }
    // // App组件与Child组件是同级别的组件:其关系是兄弟,也可以说:App与Child是兄弟组件,.
    // root.render((
    //     <>
    //         <App/>
    //         <Child/>
    //     </>
    // ));


    // App是Child的父组件,Child是App的子组件
    const App = function(){
        return (
            <div>
                <h3>App组件</h3>
                <Child/>
            </div>
        )
    }
    const Child = function(){
        return (
            <div>
                <h3>Child</h3>
            </div>
        )
    }
    // App组件与Child组件是同级别的组件:其关系是兄弟,也可以说:App与Child是兄弟组件,.
    root.render((
        <>
            <App/>
        </>
    ));
</script>
</html>